@fonts: range(12, 60, 2);
each(@fonts, {
  .font@{value} {
    font-size: @value * 1px;
  }
})

.font-bolder{
  font-weight: bolder;
}

.font-normal{
  font-weight: normal;
}



@numbers: range(5, 50, 5);

each(@numbers, {
  .mt@{value} {
    margin-top: @value * 1px;
  }

  .ml@{value} {
    margin-left: @value * 1px;
  }

  .mr@{value} {
    margin-right: @value * 1px;
  }

  .mb@{value} {
    margin-bottom: @value * 1px;
  }

  .mtb@{value} {
    margin-top: @value * 1px;
    margin-bottom: @value * 1px;
  }

  .mlr@{value} {
    margin-left: @value * 1px;
    margin-right: @value * 1px;
  }


  .pt@{value} {
    padding-top: @value * 1px;
  }

  .pl@{value} {
    padding-left: @value * 1px;
  }

  .pr@{value} {
    padding-top: @value * 1px;
  }

  .pb@{value} {
    padding-bottom: @value * 1px;
  }

  .ptb@{value} {
    padding-top: @value * 1px;
    padding-bottom: @value * 1px;
  }

  .plr@{value} {
    padding-left: @value * 1px;
    padding-right: @value * 1px;
  }
});


@dValues: block, inline, inline-block, flex, none;

each(@dValues, {
  .d-@{value} {
    display: @value;
  }
});

.flex-around{
  display: flex;
  justify-content: space-around;
}

.flex-between{
  display: flex;
  justify-content: space-between;
}

.flex-end{
  display: flex;
  justify-content: flex-end;
}

.flex-align-center{
  display: flex;
  align-items: center;
}


.center{
  display: flex;
  align-items: center;
  justify-content: center;
}

.pull-left{
  float: left;
}

.pull-right{
  float: right;
}


@color-white: #fff;

@color-gray: rgb(170,170,170);

@color-danger: rgb(236,110,104);

@color-primary: rgb(88,113,192);

@color-warning: rgb(243,168,59);

@color-success: rgb(97,206,159);

@color-violet: rgb(176,165,228);

@color-blue: rgb(96,193,214);

@color-green: rgb(160,209,65);

@color-blue-text: rgb(71,165,234);

.text-gray{
  color: @color-gray;
}

.text-danger{
  color: @color-danger;
}

.text-primary{
  color: @color-primary;
}

.text-warning{
  color: @color-warning;
}

.text-success{
  color: @color-success;
}

.text-violet{
  color: @color-violet;
}

.text-blue{
  color: @color-blue;
}

.text-green{
  color: @color-green;
}

.text-green{
  color: @color-green;
}


.bg-gray{
  background-color: @color-gray;
  color: #fff;
}

.bg-danger{
  background-color: @color-danger;
  color: #fff;
}

.bg-primary{
  background-color: @color-primary;
  color: #fff;
}

.bg-warning{
  background-color: @color-warning;
  color: #fff;
}

.bg-success{
  background-color: @color-success;
  color: #fff;
}

.bg-violet{
  background-color: @color-violet;
  color: #fff;
}

.bg-blue{
  background-color: @color-blue;
  color: #fff;
}

.bg-green{
  background-color: @color-green;
  color: #fff;
}

.bg-white{
  background-color: @color-white;
}
